<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 查聊</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-custom {
        background-image: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 动画效果 */
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    /* 渐变背景动画 */
    .bg-gradient-animated {
      background-size: 200% 200%;
      animation: gradientAnimation 15s ease infinite;
    }
    
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen">
  <!-- 主容器 -->
  <div class="flex flex-col md:flex-row min-h-screen">
    <!-- 左侧欢迎区域 (PC端显示) -->
    <div class="hidden md:flex flex-col justify-center items-center bg-gradient-custom bg-gradient-animated text-white p-12 w-full md:w-1/2">
      <div class="max-w-lg w-full">
        <!-- Logo -->
        <div class="flex items-center space-x-2 mb-12">
          <span class="text-white text-3xl"><i class="fa fa-comments-o"></i></span>
          <span class="text-2xl font-bold text-white text-shadow">查聊</span>
        </div>
        
        <!-- 欢迎文字 -->
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-shadow">
          欢迎来到<br>查聊社区
        </h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-md">
          与志同道合的朋友分享知识、讨论问题、交流经验，一起成长进步
        </p>
        
        <!-- 装饰图标 -->
        <div class="flex justify-center mt-8">
          <div class="grid grid-cols-2 gap-6 animate-float">
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-users"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-lightbulb-o"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-comments"></i>
            </div>
            <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl">
              <i class="fa fa-book"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="flex-1 flex flex-col justify-center items-center p-6">
      <!-- 移动端Logo -->
      <div class="md:hidden flex items-center space-x-2 mb-10">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </div>
      
      <!-- 登录表单容器 -->
      <div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
        <!-- 表单标题 -->
        <div class="mb-8 text-center">
          <h2 class="text-2xl font-bold text-gray-900 mb-2">欢迎回来</h2>
          <p class="text-gray-500">登录你的账号，继续探索查聊社区</p>
        </div>
        
        <!-- 登录表单 -->
        <form id="login-form" class="space-y-6">
          <!-- 邮箱/手机号输入框 -->
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱或手机号</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-user-o"></i>
              </span>
              <input type="text" id="email" name="email" placeholder="请输入邮箱或手机号" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
            </div>
          </div>
          
          <!-- 密码输入框 -->
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fa fa-lock"></i>
              </span>
              <input type="password" id="password" name="password" placeholder="请输入密码" 
                     class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus">
              <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
                <i class="fa fa-eye-slash"></i>
              </button>
            </div>
          </div>
          
          <!-- 记住我和忘记密码 -->
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input type="checkbox" id="remember-me" name="remember-me" 
                     class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary/30">
              <label for="remember-me" class="ml-2 text-sm text-gray-600">记住我</label>
            </div>
            <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码？</a>
          </div>
          
          <!-- 登录按钮 -->
          <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors">
            登录
          </button>
          
          <!-- 分隔线 -->
          <div class="flex items-center my-6">
            <div class="flex-1 border-t border-gray-200"></div>
            <span class="mx-4 text-sm text-gray-500">或使用以下方式登录</span>
            <div class="flex-1 border-t border-gray-200"></div>
          </div>
          
          <!-- 第三方登录选项 -->
          <div class="grid grid-cols-3 gap-3">
            <button type="button" class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              <i class="fa fa-weibo text-red-500"></i>
            </button>
            <button type="button" class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              <i class="fa fa-wechat text-green-600"></i>
            </button>
            <button type="button" class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              <i class="fa fa-github"></i>
            </button>
          </div>
        </form>
        
        <!-- 注册账号链接 -->
        <div class="mt-8 text-center">
          <p class="text-gray-600">
            还没有账号？ <a href="register.html" class="font-medium text-primary hover:text-primary/80 transition-colors">立即注册</a>
          </p>
        </div>
      </div>
      
      <!-- 底部版权信息 -->
      <div class="mt-10 text-center text-gray-500 text-sm">
        <p>© 2023 查聊. 保留所有权利.</p>
        <div class="mt-2 space-x-4">
          <a href="#" class="hover:text-gray-700 transition-colors">服务条款</a>
          <a href="#" class="hover:text-gray-700 transition-colors">隐私政策</a>
          <a href="#" class="hover:text-gray-700 transition-colors">帮助中心</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 错误提示弹窗 (默认隐藏) -->
  <div id="error-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
      <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-times text-2xl text-red-500"></i>
      </div>
      <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">登录失败</h3>
      <p id="error-message" class="text-gray-600 mb-6 text-center">请检查您的邮箱/手机号和密码是否正确</p>
      <button id="close-error-btn" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
        重试
      </button>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 切换密码可见性
    const togglePassword = document.getElementById('toggle-password');
    const passwordInput = document.getElementById('password');
    
    if (togglePassword && passwordInput) {
      togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        // 切换图标
        this.querySelector('i').classList.toggle('fa-eye-slash');
        this.querySelector('i').classList.toggle('fa-eye');
      });
    }
    
    // 表单提交处理
    const loginForm = document.getElementById('login-form');
    const errorModal = document.getElementById('error-modal');
    const errorMessage = document.getElementById('error-message');
    const closeErrorBtn = document.getElementById('close-error-btn');
    
    if (loginForm) {
      loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        const rememberMe = document.getElementById('remember-me').checked;
        
        // 简单的表单验证
        if (!email || !password) {
          showError('请填写所有必填字段');
          return;
        }
        
        // 这里可以添加实际的登录逻辑
        // 模拟登录请求
        setTimeout(function() {
          // 模拟成功登录，跳转到首页
          window.location.href = 'index.html';
          
          // 如果需要模拟登录失败，可以取消上面的注释并取消下面的注释
          // showError('用户名或密码错误，请重试');
        }, 1000);
      });
    }
    
    function showError(message) {
      if (errorMessage) {
        errorMessage.textContent = message;
      }
      if (errorModal) {
        errorModal.classList.remove('hidden');
      }
    }
    
    if (closeErrorBtn) {
      closeErrorBtn.addEventListener('click', function() {
        if (errorModal) {
          errorModal.classList.add('hidden');
        }
      });
    }
    
    // 第三方登录按钮点击事件
    const thirdPartyButtons = document.querySelectorAll('.grid-cols-3 button');
    thirdPartyButtons.forEach(button => {
      button.addEventListener('click', function() {
        // 这里可以添加实际的第三方登录逻辑
        // 模拟第三方登录过程
        alert('正在跳转到第三方授权页面...');
      });
    });
    
    // 忘记密码链接点击事件
    const forgotPasswordLink = document.querySelector('a[href="#"]:contains("忘记密码")');
    if (forgotPasswordLink) {
      forgotPasswordLink.addEventListener('click', function(e) {
        e.preventDefault();
        alert('忘记密码功能即将上线');
      });
    }
  </script>
</body>
</html>